<template>
    <div class="bi-datetime">
        <template v-if="popup" >
            <bi-input-handle  v-dropdown dropdown-body="body" dropdown-width="500" 
                :status = "checkStatus"
                icon = "fa-calendar"
                :placeholder = "placeholder"
                :label = "value"
                :clear = "value != undefined"
                @clear="clearValue"
            >
            </bi-input-handle>
        </template>

        <div ref="body">
            <div class="bi-datetime-body" @click.stop="()=>{}">
                <bi-calendar  
                v-model= "date"
                select
                ></bi-calendar>
                
                <bi-timepicker v-model= "time">
                    
                </bi-timepicker>
            </div>
        </div>
    </div>
</template>

<script>
import FieldMixin from '../fieldMixin.js';
import BiCalendar from '../control/calendar.vue';
import BiTimepicker from '../control/timepicker.vue';

export default{
    mixins:[FieldMixin],
    components:{
        BiCalendar,
        BiTimepicker
    },
    data(){
        return {
            valueLabel:'',
            date:undefined,
            time:"00:00:00"
        }
    },
    props:{
        popup:{
            type:Boolean,
            default:true
        }
    },
    watch:{
        modelValue:{
            handler(val){
                if (val != ''){
                    this.valueLabel = val;

                    let date = new Date(val);

                    if (date.getTime() > 0){
                        this.date = date;
                        this.time =  date.getHours()<10? '0'+date.getHours():date.getHours();
                        this.time += ':';
                        this.time += date.getMinutes()<10? '0'+date.getMinutes():date.getMinutes();
                        this.time += ':';
                        this.time += date.getSeconds()<10? '0'+date.getSeconds():date.getSeconds();
                    }
                }
            },
            immediate:true
        },
        date:{
            handler(val){
                let _date = this.formatDate(val,'YYYY-MM-DD') + ' ' + this.time;
                this.valueLabel = _date;
                this.$emit('update:modelValue',_date);
            }
        },
        time:{
            handler(val){
                if (this.date!=undefined){
                    let _date = this.formatDate(this.date,'YYYY-MM-DD') + ' ' + val;
                    this.valueLabel = _date;
                    this.$emit('update:modelValue',_date);
                }
            }
        }
    },
 
    methods:{
        clearValue(){
            this.value = '';
        },
        formatDate(date,format){
            const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
            const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

            function padZero(value) {
                return value < 10 ? `0${value}` : value;
            }

            return format
                .replace('YYYY', date.getFullYear())
                .replace('MM', padZero(date.getMonth() + 1))
                .replace('DD', padZero(date.getDate()))
                .replace('HH', padZero(date.getHours()))
                .replace('mm', padZero(date.getMinutes()))
                .replace('ss', padZero(date.getSeconds()))
                .replace('ddd', dayNames[date.getDay()])
                .replace('MMMM', monthNames[date.getMonth()]);
            
        },
    }
}
</script>

<style>
.bi-datetime-body{
    padding: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    
}

.bi-datetime-body > div{
    flex: 1;
}
</style>